<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="include/common-header :: common_header(~{::title},~{::link})">
    <title>预算激活</title>
</head>
<body class="gray-bg">

<!--页面内容开始-->
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-3">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>部门</h5>
                </div>
                <div class="ibox-content">
                    <div id="budgetinfodetailActive_deptTree"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>待激活预算</h5>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <div class="m-l-xs toolbar" id="budgetinfodetailActive_toolbar">

                        </div>
                        <table id="budgetinfodetailActive_table" class="table table-striped"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页面内容结束-->
<div th:replace="include/common-js :: common_js"></div>
<!--弹窗：预算激活-->
<div th:replace="web/budget/cur/budgetinfodetail-active-edit::budgetinfodetailActiveEdit"></div>

<script type="text/javascript">
    $(function () {
        budgetinfodetailActiveObj.initDept();
        budgetinfodetailActiveObj.myTable = $('#budgetinfodetailActive_table').bootstrapTable({
            toolbar: '#budgetinfodetailActive_toolbar',
            pagination: true,
            sidePagination: 'server',
            method: 'post',
            clickToSelect: true,
            url: "/budget/tbudgetinfodetail/list",
            queryParams: function (param) {
                param.deptCode = budgetinfodetailActiveObj.deptCode;
                param.key = $('#budgetinfodetail_key').val();
                param.queryState = 0;
                param.checkdept = false;
                return param;
            },
            formatNoMatches: function () {  //没有匹配的结果
                return '暂无数据';
            },
            columns: [{
                title: '#',
                align: 'center',
                width: 50,
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                title: '预算部门',
                field: 'deptName'
            }, {
                title: '预算项目',
                field: 'projectName'
            }, {
                title: '经济分类',
                field: 'cateName'
            }, {
                title: '金额',
                field: 'money',
                formatter: function (value, row, index) {
                    return $.moneyFormat(value);
                }
            }, {
                title: '创建时间',
                field: 'createTime'
            }, {
                title: '操作',
                width: 60,
                events: {
                    'click .active': function (e, value, row, index) {
                        budgetinfodetailActiveObj.activeHandle(row.id)
                    }
                },
                formatter: function (value, row, index) {
                    var opers = [];
                    opers.push(`<a class="active btn btn-white btn-bitbucket text-success" data-toggle="tooltip" title="激活">
                                    <i class="fa fa-thumbs-up"></i>
                                </a>`)
                    return opers.join('');
                }
            }],
            responseHandler: function (res) {
                return {
                    total: res.page.totalCount,
                    rows: res.page.list
                };
            },
            onLoadSuccess: function (data) {
                $('[data-toggle="tooltip"]').tooltip()
            }
        });
    })
    var budgetinfodetailActiveObj = new Object({
        myTable: undefined,
        deptCode: undefined,
        initDept: function () {
            let _self = this;
            $('#budgetinfodetailActive_deptTree')
                .on('changed.jstree', function (e, data) {
                    if (data.action == 'select_node') {
                        if (!$('#budgetinfodetailActive_deptTree').jstree('is_parent', data.node)) {
                            _self.deptCode = data.node.a_attr.code;
                            _self.refreshTable();
                        }
                    }

                })
                .jstree({
                    "core": {
                        "animation": 0,
                        "multiple": false,
                        data: function (node, cb) {
                            $.getJSON(`/budget/tbudgetinfo/deptTreeAll`, {}, function (data) {
                                if (data.length > 0) {
                                    data[0].state = {opened: true};
                                    data[0].type = 'root';
                                }
                                _self.priBuildTreeData(data);
                                cb(data)
                            });
                        }
                    },
                    "types": {
                        'default': {
                            'icon': 'fa fa-folder'
                        },
                        'root': {
                            'icon': 'fa fa-graduation-cap'
                        },
                        leaf: {
                            icon: 'fa fa-sitemap'
                        }
                    },
                    "plugins": [
                        "types"
                    ]
                });
        },
        priBuildTreeData: function (datas) {
            let _self = this;
            for (i in datas) {
                datas[i].a_attr = {code: datas[i].code};
                if (datas[i].children != null) {
                    _self.priBuildTreeData(datas[i].children);
                } else {
                    datas[i].type = 'leaf';
                }
            }
        },
        refreshTable: function () {
            let _self = this;
            this.myTable.bootstrapTable('refresh', {
                query: {
                    deptCode: _self.deptCode
                }
            })
        },
        activeHandle: function (id) {
            budgetinfodetailActiveEditObj.init(id)
        }
    })
</script>
</body>
</html>